<template>
	<view class="container">
		<view class="content">
			<view class="card-area">
				<view class="card-t">
					<image src="../../static/images/team-my.png" mode=""></image>
					<view class="card-title">交易资产</view>
				</view>
				<view class="card-m">
					<view class="commission">19856.00</view>
					<view class="grey-blue-F">≈ 0.02USDT</view>
				</view>
			</view>
			<view class="levelList-area">
				<view class="title">战队累计贡献</view>
				<view class="table-th">
					<view class="table-th-td" style="text-align: left">战队</view>
					<view class="table-th-td">今日交易</view>
					<view class="table-th-td">累计佣金</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">一级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">二级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">三级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">四级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">五级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">六级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
				<view class="table-tr">
					<view class="table-tr-title">七级</view>
					<view class="table-tr-td">0</view>
					<view class="table-tr-td">0</view>
				</view>
			</view>
		</view>
		<tabbar-diy :isIndex="pageIndex" :isInner="true"></tabbar-diy>
		<!-- pageIndex这个数字要从user或者team页面传进来 -->
	</view>
</template>

<script>
	let _self;
	import tabbarDiy from '../../components/tabbar-diy.vue'
	export default {
		data() {
			return {
				pageIndex: '',//从哪个主页进入：3:战队，4:我的
				today: 0,
				cumul: 0,
				personNum: 0,
				level: '七',
				levelsList: [],
				levelsLists: [
					{name: '一', val: 0},
					{name: '二', val: 0},
					{name: '三', val: 0},
					{name: '四', val: 0},
					{name: '五', val: 0},
					{name: '六', val: 0},
					{name: '七', val: 0}
				],
			}
		},
		components:{
			tabbarDiy
		},
		onShow(){
			console.log(11)
		},
		onLoad(e) {
			console.log(e.previous);
			this.pageIndex = +e.previous;
			_self = this;
		},
		methods: {
			checkLevel(name, index){
				this.showDetail = true;
				this.level = name;
				// this.levelsList 服务器请求
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		color: #FFFFFF;	
		padding: 20rpx 0 120rpx;
	}
	.title{
		font-size: 31rpx;
		text-align: center;
	}
	.card-area{
		width: 686rpx;
		height: 251rpx;
		margin: 0 auto;
		background: url(../../static/images/commission-cardBg.png) no-repeat;
		background-size: 100% 100%;
		
		.card-t{
			padding: 26rpx 40rpx;
			display: flex;
			align-items: center;
			
			image{
				width: 53rpx;
				height: 53rpx;
				margin-right: 23rpx;
			}
			
			.card-title{
				height: 23rpx;
				line-height: 23rpx;
				padding-left: 10rpx;
				color: #0DD4BB;
				font-size: 26rpx;
				border-left: 3rpx solid #0DD4BB;
			}
		}
		.card-m{
			font-size: 24rpx;
			text-align: center;
			
			.commission{
				font-family: 'fzyt_GBK';//字体在App.vue文件中引入
				font-weight: bold;
				font-size: 50rpx;
				background: linear-gradient(to bottom, #7190FC 0%, #00E4DD 35%, #33D6FE 100%);
				background-clip: text;
				color: transparent;
				margin-bottom: 8rpx;
			}
		}
	}

	.levelList-area{
		width: 686rpx;
		height: 788rpx;
		padding: 43rpx 34rpx 0;
		box-sizing: border-box;
		border-radius: 8rpx;
		background-color: #202A33;
		margin: 26rpx auto 0;
		font-size: 25rpx;
		
		.title{
			font-size: 29rpx;
			margin: 0 auto 35rpx;
		}
		.title::after{
			content: '';
			display: inline-block;
			width: 618rpx;
			height: 4rpx;
			background: url(../../static/images/commission-list-head.png) no-repeat;
			background-size: 100% 100%;
		}
		.table-th{
			height: 60rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.table-th-td{
			width: 30%;
			text-align: center;
			// flex: 1;
		}
		.table-tr{
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.table-tr-title{
			width: 30%;
			color: #7190FC;
			// flex: 1;
			// text-align: center;
		}
		.table-tr-td{
			width: 30%;
			font-size: 26rpx;
			// flex: 1;
			text-align: center;
		}
	}
	
</style>
